import { useI18n } from '@/hooks/web/useI18n'
import { reactive } from 'vue'
import { CrudSchema } from '@/hooks/web/useCrudSchemas'
import { useValidator } from '@/hooks/web/useValidator'

const { t } = useI18n()
import { ElTag } from 'element-plus'
import { SchemaConfig } from '@/api/global/types'

const { required } = useValidator()

interface Option {
  label: string
  value: string | number // 具体取决于你的数据
}

// 通用选项生成函数
const createOptions = (enumObject: { [key: string]: string }): Option[] => {
  return Object.keys(enumObject).map((key) => ({
    label: enumObject[key],
    value: parseInt(key, 10)
  }))
}

//根据接口枚举匹配出中文名称
const useEnumeratePicker = (
  enumList: any[],
  field: string | number,
  key?: string,
  value?: string
) => {
  if (!enumList) return
  const matchItem =
    enumList.find((item: Record<string, any>) => item[value ?? 'value'] === field) || {}
  return matchItem[key ?? 'label'] || ''
}

export default function (schemaConfig: SchemaConfig) {
  const statusOption = reactive(schemaConfig.fieldEnum?.status || {})
  const mtypeOption = reactive(schemaConfig.fieldEnum?.mtype || {})
  const crudSchemas = reactive<CrudSchema[]>([
    {
      field: 'selection',
      search: {
        hidden: true
      },
      form: {
        hidden: true
      },
      detail: {
        hidden: true
      },
      table: {
        type: 'selection'
      }
    },
    {
      field: 'id',
      label: t('logisticsCompany.id'),
      search: {
        hidden: true
      },
      form: {
        hidden: true
      },
      detail: {
        hidden: true
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'title',
      label: t('customer.title'),
      search: {
        component: 'Input'
      },
      form: {
        hidden: true
      },
      detail: {
        hidden: true
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'content',
      label: t('message.content'),
      search: {
        hidden: true
      },
      form: {
        hidden: true
      },
      detail: {
        hidden: true
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'fullname',
      label: t('message.fullname'),
      search: {
        hidden: true
      },
      form: {
        hidden: true
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'email',
      label: t('message.email'),
      search: {
        hidden: true
      },
      form: {
        hidden: true
      },
      detail: {
        hidden: true
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'whatsapp',
      label: t('customer.whatsapp'),
      search: {
        hidden: true
      },
      form: {
        hidden: true
      },
      detail: {
        hidden: true
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'mtype',
      label: t('message.mtype'),
      search: {
        hidden: true
      },
      form: {
        hidden: true
      },
      detail: {
        hidden: true
      },
      table: {
        headerAlign: 'center',
        align: 'center',
        slots: {
          default: (data: any) => {
            return <ElTag>{useEnumeratePicker(mtypeOption, data.row.mtype)}</ElTag>
          }
        }
      }
    },
    {
      field: 'status',
      label: t('logisticsCompany.status'),
      form: {
        hidden: true
      },
      search: {
        component: 'Select',
        componentProps: {
          options: statusOption,
          style: {
            width: '100%'
          }
        }
      },
      detail: {
        hidden: true
      },
      table: {
        headerAlign: 'center',
        align: 'center',
        slots: {
          default: (data: any) => {
            return (
              <ElTag type={data.row.status === 0 ? 'warning' : 'success'}>
                {useEnumeratePicker(statusOption, data.row.status)}
              </ElTag>
            )
          }
        }
      }
    },
    {
      field: 'create_time',
      label: t('logisticsCompany.create_time'),
      search: {
        component: 'DatePicker',
        componentProps: {
          valueFormat: 'YYYY-MM-DD'
        }
      },
      form: {
        hidden: true
      },
      detail: {
        hidden: true
      },
      table: {
        headerAlign: 'center',
        align: 'center'
      }
    },
    {
      field: 'action',
      width: (schemaConfig.actionButtonsTemplate?.length || 3) * 60 + 20 + 'px',
      label: t('tableDemo.action'),
      fixed: 'right',
      search: {
        hidden: true
      },
      form: {
        hidden: true
      },
      detail: {
        hidden: true
      },
      table: {
        headerAlign: 'center',
        align: 'center',
        slots: {
          default: (data: any) => {
            return schemaConfig.actionButtonsTemplate?.template(data) ?? null
          }
        }
      }
    }
  ])

  return {
    crudSchemas
  }
}
